import React from 'react';
import { history } from 'umi'
import { Button, Icon, Tag, Divider, Empty } from 'antd';
import moment from 'moment';
import { PageContainer, Collapse } from '@/molecules';
import { useRequest, defaultFormatResult } from '@/hooks';
import FileUpload from '@/components/Custom/FileUpload';
import { NoToChinese } from '@/utils/utils';
import { transformFileList } from '@/pages/Recruitment/utils';
import { PersonalCard } from './containers';
import { FormHeader, InfoList } from './components';
import { getFeedbackList, getInformalEmployeeInfo } from './services';
import { INTERVIEW_LABEL_LIST } from './constants';
import styles from './index.less';

const { Panel } = Collapse;

const OPINION = ['', '申请提前转正', '继续试用', '终止试用'];

const FeedbackRecord = ({ location }) => {
    const { query } = location;

    const { data: employeeInfo, loading: infoLoading } = useRequest(
        () => getInformalEmployeeInfo(query?.employeeCode),
        {
            refreshDeps: [query?.employeeCode],
            ready: !!query?.employeeCode,
            ...defaultFormatResult
        }
    );

    const { data: feedbackList, loading } = useRequest(() => getFeedbackList(query?.id), {
        refreshDeps: [query?.id],
        ready: !!query?.id,
        ...defaultFormatResult
    });

    const handleAdd = () => {
        history.push({
            pathname: '/office/personnelManagement/onboardAndLeave/informal/feedback/create',
            query
        });
    };

    const renderFeedbackInfo = o => [
        {
            label: '反馈人',
            value: o?.sourceEmployeeName || '',
            cols: 12
        },
        {
            label: '反馈时间',
            value: o?.feedbackTime ? moment(o?.feedbackTime).format('YYYY-MM-DD HH:mm') : '',
            cols: 12
        },
        {
            label: '反馈意见',
            value: OPINION[o?.opinion || 0]
        },
        {
            label: '内容',
            value: o?.content || ''
        },
        {
            label: '相关资料',
            value:
                o?.probationFeedbackFile && o?.probationFeedbackFile.length > 0 ? (
                    <div className={styles.fileUpload}>
                        <FileUpload value={transformFileList(o?.probationFeedbackFile || [])} disabled>
                            {' '}
                        </FileUpload>
                    </div>
                ) : (
                    '--'
                )
        }
    ];

    const formatTimeRange = (st, et) => {
        if (!st) return '--';
        let str = '';
        if (et) {
            str = moment(et).format('-HH:mm');
        }
        return `${moment(st).format('YYYY-MM-DD HH:mm')}${str}`;
    };

    const formatEmployeeNames = names => {
        if (names) {
            return names.split('、').map(item => (
                <Tag key={item} closable={false}>
                    {item}
                </Tag>
            ));
        }
        return '--';
    };

    const renderInterviewInfo = o => [
        {
            label: '面谈类型',
            value: '试用反馈面谈',
            cols: 12
        },
        {
            label: '面谈方式',
            value: INTERVIEW_LABEL_LIST[o?.interviewWay || 0],
            cols: 12
        },
        {
            label: '面谈地点',
            value: o?.interviewLocation || ''
        },
        {
            label: '参与人',
            value: <div>{formatEmployeeNames(o?.interviewerEmployeeName)}</div>
        },
        {
            label: '面谈时间',
            value: formatTimeRange(o?.interviewStartTime, o?.interviewEndTime)
        }
    ];

    return (
        <PageContainer loading={loading || infoLoading}>
            <PersonalCard data={employeeInfo} />
            <Divider />
            <Button block type="dashed" style={{ margin: '0 0 24px' }} onClick={handleAdd}>
                <Icon type="plus" /> 添加试用反馈
            </Button>
            {feedbackList?.map(({ probationFeedbackVO, probationInterviewArrangeVO }, index) => (
                <Collapse defaultActiveKey={['1']} key={probationFeedbackVO?.id} style={{ marginBottom: 16 }}>
                    <Panel header={`试用反馈${NoToChinese(feedbackList.length - index)}`} key="1">
                        <FormHeader title="反馈内容" style={{ marginTop: 0 }} />
                        <InfoList dataSource={probationFeedbackVO ? renderFeedbackInfo(probationFeedbackVO) : []} />
                        {probationInterviewArrangeVO?.id && [1, 3].includes(probationFeedbackVO?.opinion) && (
                            <>
                                <Divider />
                                <FormHeader title="反馈面谈安排" />
                                <InfoList dataSource={renderInterviewInfo(probationInterviewArrangeVO)} />
                            </>
                        )}
                    </Panel>
                </Collapse>
            ))}
            {feedbackList && feedbackList.length === 0 && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
        </PageContainer>
    );
};

export default FeedbackRecord;
